<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card class="box-card">
          <Detail count="$ 123412" title="总销售额">
            <template v-slot:charts>
              <span>周同比 56.67%</span>
              <svg class="icon" height="16" p-id="5126" t="1673059193100"
                   version="1.1" viewBox="0 0 1024 1024" width="16" xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M768 800l0-115.2L512 480l-256 204.8 0 115.2 256-204.8L768 800zM512 339.2l256 204.8L768 428.8 512 224 256 428.8l0 115.2L512 339.2z"
                  fill="#CC2727" p-id="5127"
                ></path>
              </svg>
              <span>日同比19.12%</span>
              <svg class="icon" height="16" p-id="6894" t="1673059286096"
                   version="1.1" viewBox="0 0 1024 1024" width="16" xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M512 428.8 256 224l0 115.2 256 204.8 256-204.8L768 224 512 428.8zM256 480l0 115.2 256 204.8 256-204.8L768 480l-256 204.8L256 480z"
                  fill="#1afa29" p-id="6895"
                ></path>
              </svg>
            </template>
            <template v-slot:footer>
              <span>日销售$ 1231</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <Detail count="43242" title="访问量">
            <template v-slot:charts>
              <LineChart></LineChart>
            </template>
            <template v-slot:footer>
              <span>日访问量 1231</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <Detail count="1312" title="支付笔数">
            <template v-slot:charts>
              <BarCharts></BarCharts>
            </template>
            <template v-slot:footer>
              <span>转换率 12%</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <Detail count="12%" title="运营活动效果">
            <template v-slot:charts>
              <ProgressCharts/>
            </template>
            <template v-slot:footer>
              <span>周同比 56.67%</span>
              <svg class="icon" height="16" p-id="5126" t="1673059193100"
                   version="1.1" viewBox="0 0 1024 1024" width="16" xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M768 800l0-115.2L512 480l-256 204.8 0 115.2 256-204.8L768 800zM512 339.2l256 204.8L768 428.8 512 224 256 428.8l0 115.2L512 339.2z"
                  fill="#CC2727" p-id="5127"
                ></path>
              </svg>
              <span>日同比19.12%</span>
              <svg class="icon" height="16" p-id="6894" t="1673059286096"
                   version="1.1" viewBox="0 0 1024 1024" width="16" xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M512 428.8 256 224l0 115.2 256 204.8 256-204.8L768 224 512 428.8zM256 480l0 115.2 256 204.8 256-204.8L768 480l-256 204.8L256 480z"
                  fill="#1afa29" p-id="6895"
                ></path>
              </svg>
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from '@/views/dashboard/Card/Detail/index.vue'
import LineChart from '@/views/dashboard/Card/lineChart/index.vue'
import BarCharts from '@/views/dashboard/Card/barCharts/index.vue'
import ProgressCharts from '@/views/dashboard/Card/progressCharts/index.vue'

export default {
  name: 'Card',
  components: {
    ProgressCharts,
    BarCharts, Detail, LineChart
  }
}
</script>

<style scoped>

</style>
